<template>
  <view>
    <!-- 搜索框 -->
    <view class="search-box">
      <uni-search-bar @input="input" cancelButton="none" radius="50" focus="true"></uni-search-bar>
    </view>
    
    <!-- 关键词搜索结果列表 -->
    <view class="search-list" v-if="searchResults.length>0">
      <view class="search-item" v-for="(item, i) in searchResults" :key="i">
        <view class="search-item-name">
          {{item.goods_name}}
        </view>
        <uni-icons type="arrowright"></uni-icons>
      </view>
    </view>
    
    <!-- 搜索关键词历史 -->
    <view class="search-history-box" v-else>
      <view class="search-title">
        <text>搜索历史</text>
        <uni-icons type="trash" @click="clearHistory"></uni-icons>
      </view>
      <view class="search-history" >
        <uni-tag v-for="(item, i) in searchHistory" :key="i" :text="item" @click="gotoGoodsList(item)"></uni-tag>
      </view>
    </view>
    
  </view>
</template>

<script>
  export default {
    data() {
      return {
        timerId: null, //防抖timerid
        searchResults: [],// 定义数据容器，页面数据（状态）
        kw: '', // 用户搜索关键词
        searchHistory: [], // 搜索历史
      };
    },
    onLoad() {
      // 初始化搜索历史
      this.searchHistory = JSON.parse( uni.getStorageSync('history') || '[]' )
    },
    methods: {
      // 用户输入事件处理函数
      input(value){
        // 先清
        clearTimeout(this.timerId)
        
        // 后开
        this.timerId = setTimeout(() => {
          // 发起数据请求
          console.log(value)
          this.kw = value
          if(!this.kw.trim()) {
            // 清空搜索结果
            this.searchResults = []
            return
          }
          // 发起请求
          this.getSearchResults()
          // 关键词存储下来
          this.saveSearchHistory()
        }, 500)
        
      },
      // 获取搜索结果
      async getSearchResults(){
        const {data: res} = await uni.$http.get('/goods/qsearch', {query: this.kw})
        console.log(res)
        // 判断异常数据
        if(res.meta.status !== 200) return uni.$showMsg()
        // 设置页面数据
        this.searchResults = res.message
      },
      // 保存搜索关键词
      saveSearchHistory(){
        // this.searchHistory.push(this.kw)
        // 追加到数组头
        // this.searchHistory.unshift(this.kw)
        // 1 先查找有没有
        const index = this.searchHistory.indexOf(this.kw)
        if(index <0 ){ // 没找到
          this.searchHistory.unshift(this.kw)
        }else { // 找到了
          this.searchHistory.splice(index, 1)
          this.searchHistory.unshift(this.kw)
        }
        
        // 把 searchHistory 保存到本地
        uni.setStorageSync('history', JSON.stringify(this.searchHistory))
      },
      // 清除搜索历史
      clearHistory(){
        uni.setStorageSync('history', '[]') //  清除本地
        this.searchHistory = [] // 清除页面
      },
      // 点击搜索历史跳转到商品列表页
      gotoGoodsList(item){
        uni.navigateTo({
          url:`/subpkg/goods_list/goods_list?query=${item}`
        })
      }
    }
  }
</script>

<style lang="scss">
  .search-box {
    background-color: #c00000;
    position: sticky;
    top: 0;
  }
  
  .search-list {
    .search-item {
      display: flex;
      height: 80rpx;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1rpx solid #efefef;
      padding: 0 16rpx;
      .search-item-name {
        font-size: 24rpx;
        // 文字不允许换行（单行文本）
        white-space: nowrap;
        // 溢出部分隐藏
        overflow: hidden;
        // 文本溢出后，使用 ... 代替
        text-overflow: ellipsis;
      }
    }
  }
  
  .search-history-box {
    .search-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 80rpx;
      border-bottom: 1rpx solid #efefef;
      padding: 0 32rpx;
    }
    .search-history {
      margin-top: 16rpx;
      uni-tag {
        margin: 16rpx;
      }
    }
  }
</style>
